<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="">
        <el-select v-model="pageDto.where.quType" placeholder="请选择">
          <el-option
            v-for="item in typeArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="">
        <el-input
          v-model="pageDto.where.content"
          placeholder="题目内容"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-select
          v-model="pageDto.where.repoIds"
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in repoList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search()">查询</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="toQuAdd()"
          >添加</el-button
        >
        <el-button type="danger" icon="el-icon-delete" @click="delBatch()"
          >批量删除</el-button
        >
        <el-button type="danger" icon="el-icon-delete" @click="exportQu()"
          >导出</el-button
        >
      </el-form-item>

      <el-form-item label="导入试题">
        <el-upload
          class="upload-demo"
          :action="uploadUrl"
          :headers="headers"
          :on-remove="handleRemove"
          name="file"
          :limit="1"
          :on-success="uploadSuccess"
          :auto-upload="true"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
    </el-form>

    <el-table
      :data="quList"
      stripe
      style="width: 100%"
      ref="repotable"
      @select-all="selectAll"
      @select="selectItem"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="quType" label="题目类型" width="100">
        <template slot-scope="scope">
          <div>
            {{ scope.row.quType | quTypeFilter }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="quType" label="难易程度" width="100">
        <template slot-scope="scope">
          <div>
            {{ scope.row.level | levelFilter }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="题目内容" width="500">
        <template slot-scope="scope">
          <div>
            <!-- <a href="javascript:void(0)" @click.prevent="toUpdate(scope.row.id)">{{scope.row.content}}</a> -->

            <span v-html="scope.row.content"></span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column label="操作">
        <div slot-scope="scope">
          <el-button
            @click="del(scope.row.id)"
            size="medium "
            type="danger"
            icon="el-icon-delete"
            >删除</el-button
          >
          <el-button
            @click="edit(scope.row)"
            size="medium "
            type="primary"
            icon="el-icon-edit"
            >修改</el-button
          >
        </div>
      </el-table-column>
    </el-table>
    <br /><br />
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageDto.now"
      :page-sizes="[3, 5, 50, 100]"
      :page-size="pageDto.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { page, deleteQu, deleteBatch } from "@/api/qu";
import { fetchRepos } from "@/api/repo";
export default {
  data() {
    return {
      uploadUrl: `${process.env.VUE_APP_BASE_API}/excel/import`,
      headers: { token: localStorage.getItem("token") },
      //题库列表
      repoList: [],
      //分页+查询条件
      pageDto: {
        now: 1,
        size: 5,
        where: {
          repoIds: [],
        },
      },
      //题目列表
      quList: [],
      total: 0,
      dialogFormVisible: false,
      repoForm: {
        title: "",
        remark: "",
      },
      typeArr: [
        {
          value: 1,
          label: "单选题",
        },
        {
          value: 2,
          label: "多选题",
        },
        {
          value: 3,
          label: "判断题",
        },
        {
          value: 4,
          label: "简答题",
        },
      ],
      selectQus: [],
    };
  },
  methods: {
    search() {
      page(this.pageDto).then((res) => {
        console.log(res);
        this.quList = res.list;
        this.total = res.total;
      });
    },
    handleCurrentChange(page) {
      this.pageDto.now = page;
      this.search();
    },
    handleSizeChange(size) {
      this.pageDto.size = size;
      this.search();
    },
    // 获取题库列表
    fetchRepos() {
      fetchRepos().then((res) => {
        console.log(res);
        this.repoList = res.data;
      });
    },

    //添加&修改成功回调
    successCallback(res) {
      this.dialogFormVisible = false;
      if (res.code == 0) {
        this.pageDto.now = 1;
        this.search();
      }
      this.$message({
        message: res.msg,
        type: res.code == 0 ? "success" : "error",
      });
    },
    toQuAdd() {
      this.$router.push({ path: "/qu/add" });
    },
    edit(row) {
      var quId = row.id;
      //路由跳转
      this.$router.push({ path: "/qu/add", query: { quId: quId } });
    },

    del(id) {
      this.$confirm("此操作将永久删除该题目，是否删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteQu(id).then((res) => {
          this.successCallback(res);
        });
      });
    },
    selectAll(selection) {
      this.selectQus = selection;
    },
    selectItem(selection) {
      this.selectQus = selection;
    },
    delBatch() {
      this.$confirm("此操作将永久删除该题目，是否删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteBatch(this.selectQus).then((res) => {
          this.successCallback(res);
        });
      });
    },
  },
  created() {
    this.search();
    this.fetchRepos();
  },
};
</script>